.overflow-hidden {
	overflow: hidden;
}
.overflow-x-hidden {
	overflow-x: hidden;
}
.overflow-y-hidden {
	overflow-y: hidden;
}
.overflow-x-scroll {
	overflow-x: scroll;
}
.overflow-y-scroll {
	overflow-y: scroll;
}
.overflow-x-auto {
	overflow-x: auto;
}
.overflow-y-auto {
	overflow-y: auto;
}
.block {
	display: block;
}
.inline {
	display: inline;
}
.inline-block {
	display: inline-block !important;
}
.inline-flex {
	display: inline-flex !important;
}
.inline-flexbox{
	display: inline-flex;
}
.m-relative {
	position: relative !important;
}
.m-absolute {
	position: absolute !important;
}
.m-fixed {
	position: fixed !important;
}
.m-sticky {
	position: sticky !important;
}
.box-full {
	width: 100% !important;
	height: 100% !important;
}
.h-full {
	height: 100% !important;
}
.h-screen {
	height: 100vh !important;
}
.h-auto {
	height: auto !important;
}
.w-full {
	width: 100% !important;
}
.w-screen {
	width: 100vw !important;
}
.w-auto {
	width: auto !important;
}
.w-fit {
	width: fit-content !important;
}
.nowrap {
	white-space: nowrap;
	flex-wrap: nowrap;
}

//溢出隐藏单行
.text-overflow-1 {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

//溢出隐藏多行
@each $i in 2, 3, 4 {
	.text-overflow-#{$i} {
		width: 100%;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: #{$i};
		-webkit-box-orient: vertical;
	}
}

@each $i in 1, 2, 3, 4 {
	.flex-#{$i} {
		flex: #{$i};
	}
}

.position-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.position-center-x {
	left: 50%;
	transform: translateX(-50%);
}
.position-center-y {
	top: 50%;
	transform: translateY(-50%);
}
.break-word {
	word-wrap: break-word;
}
.text-through {
	text-decoration: line-through;
}
.text-underline {
	text-decoration: underline;
}

@each $weight in 100, 400, 500, 700, 800 {
	.font-weight-#{$weight} {
		font-weight: #{$weight};
	}
}

.font-bold {
	font-weight: bold;
}
.text-align-left {
	text-align: left;
}

.text-align-right {
	text-align: right;
}

.text-align-center {
	text-align: center;
}

.opacity-0 {
	opacity: 0;
}
.opacity-1 {
	opacity: 0.1;
}
.opacity-2 {
	opacity: 0.2;
}
.opacity-3 {
	opacity: 0.3;
}
.opacity-4 {
	opacity: 0.4;
}
.opacity-5 {
	opacity: 0.5;
}
.opacity-6 {
	opacity: 0.6;
}
.opacity-7 {
	opacity: 0.7;
}
.opacity-8 {
	opacity: 0.8;
}
.opacity-9 {
	opacity: 0.9;
}
.opacity-10 {
	opacity: 1;
}

@for $i from 10 through 100 {
	.text-size-#{$i} {
		font-size: #{$i}px;
		
	}
}
@for $i from 0 through 200 {
	.round-#{$i} {
		border-radius: #{$i}px;
	}
	.round-t-#{$i} {
		border-top-left-radius: #{$i}px;
		border-top-right-radius: #{$i}px;
	}
	.round-b-#{$i} {
		border-bottom-left-radius: #{$i}px;
		border-bottom-right-radius: #{$i}px;
	}
	.round-l-#{$i} {
		border-bottom-left-radius: #{$i}px;
		border-top-left-radius: #{$i}px;
	}
	.round-r-#{$i} {
		border-top-right-radius: #{$i}px;
		border-bottom-right-radius: #{$i}px;
	}
	.round-tl-#{$i} {
		border-top-left-radius: #{$i}px;
	}
	.round-tr-#{$i} {
		border-top-right-radius: #{$i}px;
	}
	.round-bl-#{$i} {
		border-bottom-left-radius: #{$i}px;
	}
	.round-br-#{$i} {
		border-bottom-right-radius: #{$i}px;
	}
	.line-h-#{$i} {
		line-height: #{$i}px;
	}
	.t-#{$i} {
		top: #{$i}px;
	}
	.l-#{$i} {
		left: #{$i}px;
	}
	.r-#{$i} {
		right: #{$i}px;
	}
	.b-#{$i} {
		bottom: #{$i}px;
	}
	.m-#{$i} {
		margin: #{$i}px;
	}
	.mr-#{$i} {
		margin-right: #{$i}px;
	}
	.ml-#{$i} {
		margin-left: #{$i}px;
	}
	.mt-#{$i} {
		margin-top: #{$i}px;
	}
	.mb-#{$i} {
		margin-bottom: #{$i}px;
	}
	.mx-#{$i} {
		margin-left: #{$i}px;
		margin-right: #{$i}px;
	}
	.my-#{$i} {
		margin-top: #{$i}px;
		margin-bottom: #{$i}px;
	}
	.p-#{$i} {
		padding: #{$i}px;
	}
	.pr-#{$i} {
		padding-right: #{$i}px;
	}
	.pl-#{$i} {
		padding-left: #{$i}px;
	}
	.pt-#{$i} {
		padding-top: #{$i}px;
	}
	.pb-#{$i} {
		padding-bottom: #{$i}px;
	}
	.px-#{$i} {
		padding-left: #{$i}px;
		padding-right: #{$i}px;
	}
	.py-#{$i} {
		padding-top: #{$i}px;
		padding-bottom: #{$i}px;
	}
	.line-h-#{$i}n {
		line-height: #{$i * 4}px;
	}
	.t-#{$i}n {
		top: #{$i * 4}px;
	}
	.l-#{$i}n {
		left: #{$i * 4}px;
	}
	.r-#{$i}n {
		right: #{$i * 4}px;
	}
	.b-#{$i}n {
		bottom: #{$i * 4}px;
	}
	.m-#{$i}n {
		margin: #{$i * 4}px;
	}
	.mr-#{$i}n {
		margin-right: #{$i * 4}px;
	}
	.ml-#{$i}n {
		margin-left: #{$i * 4}px;
	}
	.mt-#{$i}n {
		margin-top: #{$i * 4}px;
	}
	.mb-#{$i}n {
		margin-bottom: #{$i * 4}px;
	}
	.mx-#{$i}n {
		margin-left: #{$i * 4}px;
		margin-right: #{$i * 4}px;
	}
	.my-#{$i}n {
		margin-top: #{$i * 4}px;
		margin-bottom: #{$i * 4}px;
	}
	.p-#{$i}n {
		padding: #{$i * 4}px;
	}
	.pr-#{$i}n {
		padding-right: #{$i * 4}px;
	}
	.pl-#{$i}n {
		padding-left: #{$i * 4}px;
	}
	.pt-#{$i}n {
		padding-top: #{$i * 4}px;
	}
	.pb-#{$i}n {
		padding-bottom: #{$i * 4}px;
	}
	.px-#{$i}n {
		padding-left: #{$i * 4}px;
		padding-right: #{$i * 4}px;
	}
	.py-#{$i}n {
		padding-top: #{$i * 4}px;
		padding-bottom: #{$i * 4}px;
	}
	.w-#{$i} {
		width: #{$i}px;
	}
	.h-#{$i} {
		height: #{$i}px;
	}
	.w-#{$i}n {
		width: #{4 * $i}px;
	}
	.h-#{$i}n {
		height: #{4 * $i}px;
	}
}

.round-50-p {
	border-radius: 50%;
}

@each $i in 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 9999, 99999 {
	.z-index-#{$i} {
		z-index: #{$i};
	}
}

.mx-auto {
	margin: 0 auto;
}
.ml-auto {
	margin-left: auto;
}
.mr-auto {
	margin-right: auto;
}
.flex {
	display: flex;
	flex-direction: row;
}
.flex-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.flex-col {
	display: flex;
	flex-direction: column;
}
.flex-col-center, .flex-center-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-j-s {
	justify-content: flex-start !important;
}
.flex-j-c {
	justify-content: center !important;
}
.flex-j-e {
	justify-content: flex-end !important;
}

.flex-j-b {
	justify-content: space-between !important;
}
.flex-j-a {
	justify-content: space-around !important;
}
.flex-a-c {
	align-items: center !important;
}
.flex-a-s {
	align-items: flex-start !important;
}
.flex-a-e {
	align-items: flex-end !important;
}
.flex-a-s-c {
	align-self: center !important;
}
.flex-a-s-s {
	align-self: flex-start !important;
}
.flex-a-s-e {
	align-self: flex-end !important;
}
.textfff {
	color: #fff !important;
}
.text888 {
	color: #888888 !important;
}
.text999 {
	color: #999999 !important;
}
.text666 {
	color: #666666 !important;
}
.text333 {
	color: #333333 !important;
}
.text000 {
	color: #000000 !important;
}
.textf7 {
	color: #f7f7f7 !important;
}
.textf5 {
	color: #f5f5f5 !important;
}
.textf4 {
	color: #f4f4f4 !important;
}
.textf3 {
	color: #f3f3f3 !important;
}
.textf8 {
	color: #f8f8f8 !important;
}
.textccc {
	color: #ccc;
}
.bgfff {
	background: #fff !important;
}
.bg888 {
	background: #888888 !important;
}
.bg999 {
	background: #999999 !important;
}
.bg666 {
	background: #666666 !important;
}
.bg333 {
	background: #333333 !important;
}
.bgf5 {
	background: #f5f5f5 !important;
}
.bgf4 {
	background: #f4f4f4 !important;
}
.bgf3 {
	background: #f3f3f3 !important;
}
.bgf8 {
	background: #f8f8f8 !important;
}
.box-border {
	box-sizing: border-box;
}
.box-content {
	box-sizing: content-box;
}
.cursor-pointer{
	cursor:pointer
}